<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
    <link rel="stylesheet" href="p-0.css">
</head>
<body>
	
    <div class="page-top">
        <div class="page-content">
            <h2>任务计划列表</h2>
        </div>
    </div>
    <div class="main" id="app">
        <h3 class="big-title">添加任务：</h3>
        <input placeholder="例如：吃饭睡觉打豆豆； 提示：+回车即可添加任务" class="task-input" 
        	v-on:keyup.enter="addTodo" v-model="todo"/>
        <ul class="task-count" v-show="list.length">
            <li>{{list.length}}个任务未完成</li>
            <li class="action">
                <a class="active" href="#">所有任务</a>
                <a href="#">未完成的任务</a>
                <a href="#">完成的任务</a>
            </li>
        </ul>
        <h3 class="big-title">任务列表：</h3>
        <div class="tasks">
            <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
            <ul class="todo-list">
            	<li class="todo" 
            		v-for="(v,k) in list" 
            		v-bind:class="{completed:v.isChecked}">
                    <div class="view">
                        <input class="toggle" type="checkbox" v-model="v.isChecked"/>
                        <label>{{v.title}}</label>
                        <button class="destroy" @click="delTodo(k)"></button>
                    </div>
                    <input class="edit"/>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
<script src="../2.1.8/vue.js"></script>
<script>
	/*****************************************************************
		在 vue 中操作数组，会自动触发视图更新，
		主要在于 vue 对原生数组方法进行了封装，实现了数据响应式
	*****************************************************************/
	let list = [{ 
			title : '马云',
			isChecked : true, // 表示选中
		},{ 
			title : '李彦宏',
			isChecked : false, // 表示选中 
		}];
	var vm = new Vue({
		el : '#app',
		data : {
			list : list,
			todo : ''
		},
		methods : {
			// 添加任务
			addTodo(e){
				this.list.unshift({
					title : this.todo,
					isChecked : false 
				});
				this.todo = '';
			},
			// 删除任务
			delTodo(k){
				this.list.splice(k,1);
			}
		}
	});
</script>
